import React, {useRef, useState} from 'react';
import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
import {PageContainer} from "@ant-design/pro-layout";
import ProTable from '@ant-design/pro-table';
import {Button, message, Popconfirm, Tooltip} from 'antd';
import {getPermissionData, deletePermissionData} from '@/services/permission'
import CreateOrEdit from "./components/CreateOrEdit";

const Index = () => {

  const ref = useRef();

  // 修改 模态框状态设置
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 修改id
  const [uid, setUid] = useState(undefined);

  // 删除
  const deletePermission = async (id) => {
    const response = await deletePermissionData(id);
    if (response.status === undefined) {
      ref.current.reload()
      message.success('删除成功')
    }
  }

  // 是否显示模态框 添加、修改
  const isShowModal = (show, uid = undefined) => {
    setIsModalVisible(show)
    setUid(uid)
  }

  // 获取权限路由列表
  const getPermission = async () => {
    const response = await getPermissionData();
    const routes = response.data.map(item => {
      return {
        id: item.id,
        cn_name: item.cn_name,
        name: item.name,
        children: item.childes.data,
        pid: item.pid
      }
    })
    return {
      data: routes,
      success: true,
    }
  }

  // 表格字段名
  const columns = [
    {
      title: '名称',
      dataIndex: 'cn_name',
      width: '30%',
      hideInSearch: true,
    },
    {
      title: '路由',
      dataIndex: 'name',
      width: '50%',
      hideInSearch: true,
    },
    {
      title: '操作',
      render: (_, record) => {
        return record.pid === 0 ? '' : <div>
          <Tooltip title="编辑">
            <Button
              type="primary"
              onClick={() => {
                isShowModal(true, record.id)
              }}
              shape="circle" icon={<EditOutlined/>}
            />&nbsp;&nbsp;&nbsp;
          </Tooltip>
          <Tooltip title="删除">
            <Popconfirm title="你确定要删除吗？" onConfirm={() => {
              deletePermission(record.id)
            }} okText='确认'>
              <Button
                type="danger"
                shape="circle"
                icon={<DeleteOutlined/>}
              />
            </Popconfirm>&nbsp;&nbsp;
          </Tooltip>
        </div>
      }
    },
  ];

  return (
    <PageContainer>
      <ProTable
        actionRef={ref}
        columns={columns}
        request={async (params = {}, success, total) =>
          getPermission(params, success, total)}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        checkStrictly={false}
        search={false}
        pagination={false}
        ellipsis={true}
        dateFormatter="string"
        headerTitle="路由权限列表"
        toolBarRender={() => [
          <Button key="button" onClick={() => isShowModal(true)} icon={<PlusOutlined/>} type="primary">
            新建
          </Button>,
        ]}
      />
      {
        isModalVisible ? <CreateOrEdit
          isModalVisible={isModalVisible}
          isShowModal={isShowModal}
          uid={uid}
          actionRef={ref}
        /> : ''
      }
    </PageContainer>
  );
};

export default Index;



